<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入订单号" size="small" class="input-with-select" v-model="queryInfo.id" clearable
                    @clear="getBmhOrderList"/>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入手机号" size="small" class="input-with-select" v-model="queryInfo.mobile" clearable
                    @clear="getBmhOrderList"/>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.orderStatus" placeholder="订单状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="出单成功" value="S"></el-option>
            <el-option label="已退款" value="R"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getBmhOrderList">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="orderList" border stripe>
        <el-table-column label="订单号" prop="id" width="66"></el-table-column>
        <el-table-column label="院线" prop="lineName" width="110"></el-table-column>
        <el-table-column label="城市" prop="cityName" width="110"></el-table-column>
        <el-table-column label="影院" prop="cinemaName" width="120"></el-table-column>
        <el-table-column label="电影订单ID" prop="movieOrderId"></el-table-column>
        <el-table-column label="套餐名称" prop="cinemaBmhBatchName"></el-table-column>
        <el-table-column label="价格" prop="price" width="60"></el-table-column>
        <el-table-column label="数量" prop="qty" width="60"></el-table-column>
        <el-table-column label="订单状态" prop="orderStatusText" width="70">
          <template slot-scope="scope">
            <span type="primary" v-if="scope.row.orderStatus=='T'" style="color:red"> {{scope.row.orderStatusText }}</span>
            <span type="primary" v-if="scope.row.orderStatus!='T'">{{ scope.row.orderStatusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" prop="addTimeText" width="124"></el-table-column>
        <el-table-column label="操作" width="78">
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="getBmhOrder(scope.row.id)">操作</el-button>
          </template>
        </el-table-column>
        <el-table-column label="用户手机号" prop="mobile" width="100"></el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <el-drawer title="订单信息" :visible.sync="drawer" :with-header="false" size="400">
      <el-card>
        <el-descriptions :title="order_title" class="margin-top" :column="3" border>
          <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ order.mobile }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ order.orderStatusText }}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions title="套餐信息" class="margin-top" :column="2" border>
          <el-descriptions-item label="院线">{{ order.lineName }}</el-descriptions-item>
          <el-descriptions-item label="影院">{{ order.cinemaName }}</el-descriptions-item>
          <el-descriptions-item label="电影订单id"><el-tag>{{ order.movieOrderId }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="套餐名称">{{ order.cinemaBmhBatchName }}</el-descriptions-item>
          <el-descriptions-item label="价格">{{ order.price }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ order.qty }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card>
        <el-image v-for="item in order.couponList" :key="item.id"
            style="width: 120px; height: 160px; margin-right: 30px;"
            :src="item.couponPassPicUrl"
            :preview-src-list="couponPicList">
        </el-image>
        <div v-for="item in order.couponList" :key="item.id" style="margin-top: 10px;">手机号：{{item.mobile}}， 验证码：{{item.validPass}}</div>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
import Api from "@/api/Movie.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        dialogImageUrl: '',
        disabled: false,
        queryInfo: {
          id: "",
          mobile: "",
          pageNo: 1,
          orderStatus: 'S',
          payStatus: 'S',
          pageSize: 20, // 页大小
        },
        quantity: 0,
        order: {
        },
        orderList: [],
        total: 0,
        order_title:'订单详情',
        muted:true,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        couponPicList: [
        ]
      };
    },
    created() {
        this.getBmhOrderList();
    },
    methods: {
      getBmhOrderList() {
        Api.getBmhOrderList(this.queryInfo).then((res) => {
          if (res.success) {
            this.orderList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      getBmhOrder(id) {
        this.drawer = true;
        Api.getBmhOrder({'id': id}).then((res) => {
          if (res.success) {
            this.order = res.data;
            this.couponPicList = [];
            var couponList = res.data.couponList;
            couponList.forEach((item,index)=>{
              this.couponPicList.push(item.couponPassPicUrl)
            });
          } else {
            return this.$message.error("获取订单失败");
          }
        });
      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getBmhOrderList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getBmhOrderList();
      }
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
